import { StyleSheet, Text, View, ImageBackground, Dimensions, TextInput, TouchableHighlight, Alert, KeyboardAvoidingView } from 'react-native'
import React, { useState } from 'react'
import Icon from 'react-native-vector-icons/FontAwesome'
import Icon2 from 'react-native-vector-icons/AntDesign'
import { Navigation } from 'react-native-navigation'

// 获取屏幕的宽高
const { width, height } = Dimensions.get('screen')
const Login = (props) => {
  const [telValue, setTelValue] = useState()
  // textInput内容发生改变时触发
  const onChangeText = v => {
    console.log(v)
    setTelValue(v)
  }
  // 验证手机号
  const checkTel = () => {
    let reg = /^[1][3-9]\d{9}$/
    if (reg.test(telValue) && telValue != '') {
      // Alert.alert('验证成功', '手机号格式正确')

      // 1.Navigation.push(),导航所在的栈中,添加一个新的导航子对象，子对象添加到栈的最后，导航显示栈中最后一个子对象，并且在页面上显示后退的按键
      // Navigation.push(props.componentId, {
      //   component:{
      //     name:'InputAuthCode',
      //     passProps: { // 向下个导航页传递参数
      //       telValue
      //     }
      //   }
      // })

      // 2.去除返回按钮的方法
      Navigation.showModal({
        stack: {
          children: [
            {
              component: {
                name: 'InputAuthCode',
                passProps: { // 向下个导航页传递参数
                  telValue
                }
              }
            }
          ]
        }
      })
    } else {
      Alert.alert('验证失败', '手机号不符合规范')
    }
  }
  return (
    <KeyboardAvoidingView behavior={Platform.OS != 'ios' ? 'padding' : 'height'}>
      <ImageBackground source={require('../assets/img/cat.jpg')} style={styles.ImageBackgroundContainer}>
        <View style={styles.containbackground}>
          {/* 上半部分内容 */}
          <View style={styles.containerHead}>
            <View>
              <Text style={styles.headText}>手机号登录 / 注册</Text>
              <Text style={styles.footText}>未注册手机验证后自动登录</Text>
            </View>
            <View style={styles.phoneLogin}>
              <Text style={{ color: 'white', fontSize: 18 }}>+86</Text>
              <Icon style={styles.vIcon} name='sort-down' size={20} color='#fff' />
              <TextInput
                keyboardType='phone-pad'
                value={telValue}
                onChangeText={text => onChangeText(text)}
                placeholder='请输入11位的手机号码'
                placeholderTextColor='#fff'
                maxLength={11}
                style={styles.textInput}
                onSubmitEditing={checkTel}
              />
            </View>
            <TouchableHighlight
              activeOpacity={0.5}
              underlayColor="rgba(0,0,0,0.6)"// 改变触发后颜色的透明度
              // 请求后台，判断手机号码是否注册过，注册了的，直接登录，没有注册的，进行验证并注册，成功后，自动登录。
              onPress={checkTel}
              style={styles.touchLogin}
            >
              <View>
                <Text style={{ color: 'white', fontSize: 18 }}>一键登录</Text>
              </View>
            </TouchableHighlight>
          </View>
          {/* 下半部分内容 */}
          <View style={styles.containerFoot}>
            <View>
              <Text style={{ color: '#fff', fontSize: 14 }}>其他登录方式</Text>
            </View>
            <View style={styles.loginMethods}>
              <TouchableHighlight
                activeOpacity={0.5}
                underlayColor="rgba(229, 229, 229,0.6)"
                onPress={() => { console.log('wechat') }}
                style={styles.loginIcon}>
                <Icon name='wechat' size={20} color='white' />
              </TouchableHighlight>
              <TouchableHighlight
                activeOpacity={0.5}
                underlayColor="rgba(229, 229, 229,0.6)"
                onPress={() => { console.log('qq') }}
                style={styles.loginIcon}>
                <Icon name='qq' size={20} color='white' />
              </TouchableHighlight>
              <TouchableHighlight
                activeOpacity={0.5}
                underlayColor="rgba(229, 229, 229,0.6)"
                onPress={() => { console.log('weibo') }}
                style={styles.loginIcon}>
                <Icon name='weibo' size={20} color='white' />
              </TouchableHighlight>
              <TouchableHighlight
                activeOpacity={0.5}
                underlayColor="rgba(229, 229, 229,0.6)"
                onPress={() => { console.log('bug') }}
                style={styles.loginIcon}>
                <Icon2 name='alipay-square' size={20} color='white' />
              </TouchableHighlight>
            </View>
            <View>
              <Text style={{ color: 'white' }}>登录即代表同意 <Text style={{ fontSize: 16, textDecorationLine: 'underline' }}>用户协议</Text> 和 <Text style={{ fontSize: 16, textDecorationLine: 'underline' }}>隐私政策</Text>
              </Text>
            </View>
          </View>
        </View>
      </ImageBackground>
    </KeyboardAvoidingView>
  )
}
Login.options = {
  statusBar: {
    visible: false
  },
  topBar: {
    visible: false
  }
}

export default Login

const styles = StyleSheet.create({
  ImageBackgroundContainer: {
    width: width,
    height: height,
  },
  containbackground: {
    height: '100%',
    backgroundColor: 'rgba(0,0,0,0.1)',
    paddingRight: 20,
    paddingLeft: 20,
    paddingBottom: 60
  },
  // 上半部分内容
  containerHead: {
    height: '50%',
    // backgroundColor: 'rgba(258,258,258,0.5)',
  },
  headText: {
    color: '#fff',
    fontSize: 20,
    fontWeight: '600',
    marginTop: 80,
    marginBottom: 5
  },
  footText: {
    color: '#fff',
    fontSize: 14,
    marginBottom: 100

  },
  phoneLogin: {
    height: 60,
    borderRadius: 30,
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(255, 255, 255, 0.5)',
  },
  vIcon: {
    marginBottom: 5,
    marginLeft: 10,
    marginRight: 10

  },
  textInput: {
    fontSize: 18,
    color: 'white'
  },
  touchLogin: {
    height: 60,
    borderRadius: 30,
    marginTop: 20,
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(0, 122, 204, 0.5)',
  },
  // 下半部分内容
  containerFoot: {
    height: '50%',
    // backgroundColor: 'rgba(258,258,258,0.5)',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-end'
  },
  loginMethods: {
    width: '100%',
    marginTop: 20,
    marginBottom: 20,
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-around'
  },
  loginIcon: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 25,
    width: 50,
    height: 50,
    backgroundColor: '#000',
  }
})